<template>
  <div>
    <el-table
        :data="books"
        style="width: 100%;"
        :row-class-name="tableRowClassName">

      <el-table-column
          prop="id"
          label="ID"
          width="180">
      </el-table-column>

      <el-table-column
          prop="name"
          label="书名"
          width="180">
      </el-table-column>

      <el-table-column
          prop="author"
          label="作者"
          width="180">
      </el-table-column>

      <el-table-column
          prop="publish"
          label="出版社"
          width="180">
      </el-table-column>

      <el-table-column
          prop="price"
          label="价格">
      </el-table-column>

      <el-table-column
          prop="pages"
          label="页数">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="remove(scope.row)"
                     @click.native.prevent="deleteRow(scope.$index, books)"
                     type="text"
                     size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-footer>
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="size"
          :total="total"
          @current-change="page" >
      </el-pagination>
    </el-footer>
  </div>
</template>

<style>

.el-pagination{
  text-align: center;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
export default {
  name: "BookManage",
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
      this.$message({
        message: '删除成功',
        type: 'success'
      });
    },
    remove(row){
      this.$http.post(
          "/book/deleteBook",
          {
            id:row.id
          }
      ).then(function () {
      })
    },
    edit(row){
      // 跳转到UpdateBook页面,并携带数据过去
      this.$router.push(
          {
            path:"/updateBook",
            query:{
              id:row.id,
              name:row.name,
              author:row.author,
              publish:row.publish,
              price:row.price,
              pages:row.pages
            }
          }
      )
    },

    // eslint-disable-next-line no-unused-vars
    tableRowClassName({row, rowIndex}) {
      if (rowIndex %2 === 1) {
        return 'warning-row';
      } else if (rowIndex % 2 === 0) {
        return 'success-row';
      }
      return '';
    },
    page(currentPage){
      const _this= this
      this.$http.get("/book/pageBook/"+currentPage).then(function (r){
         _this.books= r.data.content
         _this.total=r.data.totalElements
      })
    }
  },// methods

  data(){
    return {
      // 返回一个数组，数组里面是对象
      //总页数
      total:null,
      //个数
      size:null,

      books:[]
    }
  },// data()

  // 页面一加载就调用此函数
  created() {
    // 此处的this才是Vue的对象
    // this.books
    const _this= this
    this.$http.get("/book/pageBook/1").then(function (r){
      _this.books= r.data.content
      _this.total=r.data.totalElements
      _this.size = r.data.numberOfElements
    })
  }//created()
}
</script>